<template>
	<view class="app-container">
		<u-toast ref="uToast" />
		<!-- 密码登录 -->
		<text class="app-container__tip">欢迎登录~</text>
		<view class="app-container__item">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#9D60FF">

			</u-tabs>
			<password-login v-show="type === 'password'" @change="handleChangeType"
				:parentCheck="checked"></password-login>
			<!-- 验证码登录 -->
			<code-login v-show="type === 'code'" @change="handleChangeType" :parentCheck="checked"></code-login>
			<view class="flex justify-center app-container__footer">
				<u-checkbox v-model="checked" active-color="orange" icon-size="24" label-size="22"
					@change="checkChange">登录即同意<text class="app-container__footer--link"
						@click="openAgreementUrl()">《用户隐私协议》</text></u-checkbox>



			</view>
		</view>

	</view>
</template>

<script>
	import PasswordLogin from "./components/PasswordLogin.vue";
	import CodeLogin from "./components/CodeLogin.vue";
	export default {
		components: {
			PasswordLogin,
			CodeLogin,
		},
		data() {
			return {
				type: "password",
				list: [{
					name: '账号登录'
				}, {
					name: '验证码登录'
				}],
				current: 0,
				checked: true
			};
		},
		methods: {
			openAgreementUrl() {
				let url = 'http://118.31.238.190/ysxy.html'
				uni.navigateTo({
					url: '/pages/main/webview/web_view?url=' + url
				})


			},
			handleChangeType(type) {
				this.type = type;
			},
			change(index) {
				this.current = index;
				console.log("index=" + index)
				if (index == 0) {
					this.handleChangeType('password')
				} else {
					this.handleChangeType('code')
				}

			},
			checkChange(e) {
				console.log("e=" + JSON.stringify(e))
				this.checked = e.value;
			}
		},
	};
</script>
<style>
	page {
		background-color: white;
	}
</style>
<style scoped lang="scss">
	.app-container {

		padding: 30rpx;
		position: relative;

		&__tip {
			font-size: 46rpx;
		}

		&__item {
			border: 1rpx solid #f6f6f6;
			border-radius: 20rpx;
			margin-top: 100rpx;
			padding: 10rpx;
			box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
		}

		&__footer {


			margin-bottom: 20rpx;

			&--link {
				color: $zx-theme-color;
			}
		}
	}
</style>